<template>
    <div id="side_bar">
			<!-- sidebar icon sample please refer to https://fontawesome.com/icons/ -->
            <!-- Sidebar -->
            <div class="sidebar" id="sidebar" >
                <div class="sidebar-inner slimscroll">
					<div id="sidebar-menu" class="sidebar-menu">
                        <!-- 学生菜单 -->
						<ul :class="{ 'stu_hide': isStuActive }">
							<li class="menu-title"> 
								<span>{{$t('nav_title.stu_base_menu')}}</span>
							</li>
							<li class="submenu"> 
								<router-link :to="{path:'/home'}" ><i class="fas fa-home"></i> <span>{{$t('nav.home')}}</span></router-link>
							</li>
							<li class="submenu"> 
								<router-link :to="{path:'/myprofile'}" ><i class="fas fa-user"></i> <span>{{$t('nav.myprofile')}}</span></router-link>
							</li>
							<li class="submenu"> 
								<router-link :to="{path:'#'}" ><i class="fas fa-wallet"></i> <span>{{$t('nav.myaccount')}}</span> <span class="menu-arrow"/></router-link>
                                <ul>
                                    <!-- 使用<router-link>将自动转化为<a>标签 -->
									<li><router-link :to="{path:'/charge'}" >{{$t('nav.charge')}}</router-link></li>
                                </ul>
							</li>
							<li class="submenu"> 
								<router-link :to="{path:'#'}" ><i class="far fa-calendar-minus"></i> <span>{{$t('nav.leave')}}</span></router-link>
							</li>
							<li class="submenu"> 
								<router-link :to="{path:'#'}" ><i class="fas fa-edit"></i> <span>{{$t('nav.estimate')}}</span></router-link>
							</li>
							<li class="submenu"> 
								<router-link :to="{path:'#'}" ><i class="far fa-clipboard"></i> <span>{{$t('nav.score')}}</span></router-link>
							</li>
							<li class="submenu"> 
								<router-link :to="{path:'#'}" ><i class="fas fa-book"></i> <span>{{$t('nav.textbook_order')}}</span></router-link>
							</li>
							<li class="submenu"> 
								<router-link :to="{path:'#'}" ><i class="fas fa-book-open"></i> <span>{{$t('nav.tem_course_select')}}</span></router-link>
							</li>
						</ul>
                        <!-- 教师菜单 -->
						<ul class="" :class="{ 'tea_hide': isTeaActive }">
							<li class="menu-title"> 
								<span>{{$t('nav_title.tea_base_menu')}}</span>
							</li>
							<li class="submenu"> 
								<router-link :to="{path:'#'}" ><i class="fas fa-book"></i> <span>{{$t('nav.textbook')}}</span></router-link>
							</li>
							<li class="submenu">
								<router-link :to="{path:'/queryAllUser'}" ><i class="fas fa-user-friends"></i> <span>{{$t('nav.persion_info')}}</span></router-link>
							</li>
							<li class="submenu"> 
								<router-link :to="{path:'/myprofile'}" ><i class="fas fa-user"></i> <span>{{$t('nav.myprofile')}}</span></router-link>
							</li>
							<li class="menu-title"> 
								<span>{{$t('nav_title.tea_course')}}</span>
							</li>
							<li class="submenu"> 
								<router-link :to="{path:'#'}" ><i class="fas fa-list-ol"></i> <span>{{$t('nav.score_manage')}}</span></router-link>
							</li>
							<li class="submenu">
								<router-link :to="{path:'#'}" ><i class="fas fa-book-reader"></i> <span>{{$t('nav.teaching')}}</span></router-link>
							</li>
							<li class="menu-title"> 
								<span>{{$t('nav_title.tea_class')}}</span>
							</li>
							<li class="submenu"> 
								<router-link :to="{path:'#'}" ><i class="fas fa-calendar-alt"></i> <span>{{$t('nav.leave_manage')}}</span></router-link>
							</li>
							<li class="menu-title"> 
								<span>{{$t('nav_title.tea_speciality')}}</span>
							</li>
							<li class="submenu"> 
								<router-link :to="{path:'#'}" ><i class="fas fa-book-reader"></i> <span>{{$t('nav.course_manage')}}</span></router-link>
							</li>
							<li class="submenu"> 
								<router-link :to="{path:'#'}" ><i class="fas fa-warehouse"></i> <span>{{$t('nav.class_course')}}</span></router-link>
							</li>
							<li class="submenu"> 
								<router-link :to="{path:'/sftp'}" ><i class="fas fa-folder-open"></i> <span>{{$t('nav.sftp_system')}}</span></router-link>
							</li>
							<li class="submenu"> 
								<router-link :to="{path:'#'}" ><i class="fas fa-edit"></i> <span>{{$t('nav.estimate_manage')}}</span></router-link>
							</li>
							<li class="menu-title"> 
								<span>{{$t('nav_title.tea_finance')}}</span>
							</li>
							<li class="submenu"> 
								<router-link :to="{path:'#'}" ><i class="fas fa-book"></i> <span>{{$t('nav.txtbook_order_manage')}}</span></router-link>
							</li>
							<li class="submenu"> 
								<router-link :to="{path:'#'}" ><i class="fas fa-comment-dollar"></i> <span>{{$t('nav.scholarship_manage')}}</span></router-link>
							</li>
							<li class="menu-title"> 
								<span>{{$t('nav_title.adm_menu')}}</span>
							</li>
							<li class="submenu"> 
								<router-link :to="{path:'/manage'}" ><i class="fas fa-user-friends"></i> <span>{{$t('nav.info_manage')}}</span></router-link>
							</li>
							<li class="submenu"> 
								<router-link :to="{path:'/manage_auth'}" ><i class="fas fa-user-cog"></i> <span>{{$t('nav.power_manage')}}</span></router-link>
							</li>
							<li class="submenu"> 
								<router-link :to="{path:'/department'}" ><i class="fas fa-hotel"></i> <span>{{$t('nav.department')}}</span></router-link>
							</li>
							<li class="submenu"> 
								<router-link :to="{path:'/classmanage'}" ><i class="fas fa-sitemap"></i> <span>{{$t('nav.class_manage')}}</span></router-link>
							</li>
							<li class="submenu"> 
								<router-link :to="{path:'#'}" ><i class="fas fa-book-open"></i> <span>{{$t('nav.temp_course')}}</span></router-link>
							</li>
						</ul>
					</div>
                </div>
            </div>
			<!-- /Sidebar -->

    </div>
</template>

<style>
.sidebar{
    overflow-y: auto;
	-ms-overflow-style: none; /** 隐藏滚动条，兼容IE 10+ */
	overflow: -moz-scrollbars-none; /** 隐藏滚动条，兼容Firefox */
}
.sidebar::-webkit-scrollbar { width: 0 !important /** 隐藏滚动条，兼容chrome和Safari */ }
.tea_hide{
	display: none;
}
.stu_hide{
	display: none;
}
.submenu{
	text-align: left;
}
</style>

<script>
export default {
  mounted(){
	this.isStuActive = localStorage.getItem('userType')=='tea'?true:false;
	this.isTeaActive = localStorage.getItem('userType')=='stu'?true:false;
    
    // //事件流
    // var ul=this.$domtool.id('sidebar-menu');
	// var lis=ul.children;
    // for(var i=0;i<lis.length;i++){
    //     lis[i].onclick=function(){
    //         // console.log(this);
    //     }
    // }

    function init() {
        // 事件流：self defined by liushuai as below
        $('li').on("click",function(e){
            $('li').each(function(){
                if($(this).attr("class")!=null && $(this).hasClass('active'))
					$(this).removeClass("active");
            });
            $(this).addClass("active");
        })

        $('a').on("click",function(e){
            $('a').each(function(){
                if($(this).attr("class")!=null && $(this).hasClass('active'))
					$(this).removeClass("active");
            });
            $(this).addClass("active");
        })

		$('#sidebar-menu a').on('click', function(e) {
			if($(this).parent().hasClass('submenu')) {
				e.preventDefault();
			}
			if(!$(this).hasClass('subdrop')) {
				$('ul', $(this).parents('ul:first')).slideUp(350);
				$('a', $(this).parents('ul:first')).removeClass('subdrop');
				$(this).next('ul').slideDown(350);
				$(this).addClass('subdrop');
			} else if($(this).hasClass('subdrop')) {
				$(this).removeClass('subdrop');
				$(this).next('ul').slideUp(350);
			}
		});
		$('#sidebar-menu ul li.submenu a.active').parents('li:last').children('a:first').addClass('active').trigger('click');
        // Sidebar Slimscroll已启用，当前使用如下样式
        /**
.sidebar{
    overflow-y: scroll;
}
         */
	}
    init();
  },
  data(){
      return {
		// 不能带有空格缩进，会报错
		isStuActive: true,
		isTeaActive: true
      }
  },
  methods: {
    
  },
  components: {
  }
}
</script>